<template>
  <!-- 自定义的选择控件 -->
  <div class="custom-checkbox flex-wrap">
      <button :class="[(index + 1) % mr0Number === 0 ? 'mr0' : '', checked.findIndex(cd => cd === item.value) > -1 ? 'primary' : '']"
	  v-for="(item, index) in options"
	  plain
	  @click="toggleChecked(item)" :key="index">{{ item.name }}</button>
  </div>
</template>

<script>
import { parse, stringify } from '@/assets/js/util'
export default {
    /*model: {
        prop: 'checked',
        event: 'change'
    },*/
    props: {
        checked: { // 选中的value值
            type: Array,
            default: () => []
        },
        options: { // 选项(必须含有value, name 属性)
            type: Array,
            default: () => []
        },
        multiple: { // 是否多选
            type: Boolean,
            default: false
        },
        mr0Number: { // 表示第几个开始不需要右边距
            type: Number,
            default: 4
        }
    },
    mounted() {
        console.log("-> checked", this.checked);
    },
    methods: {
        toggleChecked(item) {
            let index = this.checked.findIndex(cd => cd === item.value), copy = parse(stringify(this.checked))
            if (index > -1) {
                this.multiple && copy.splice(index, 1)
            } else {
                this.multiple ? copy.push(item.value) : copy = [item.value]
            }
            // 返回选中的值 以及 对象
            let items = []
            copy.forEach(element => {
                let idx = this.options.findIndex(it => it.value === element)
                if (idx > -1) {
                    items.push(parse(stringify(this.options[idx])))
                }
            })
            this.$emit('change', copy, items)
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '@/static/css/variable.scss';
    .custom-checkbox {
        .van-button::before { display: none; }
        button {
            // padding: 16px 20px;
            height: 48px;
            width: 77px;
            width: calc(25% - 7px);
            border-radius: 4px;
            margin-right: 9px;
            border: 1px solid #EEEEEE !important;
            color: #666666;
            margin-bottom: 9px;
            padding-left: 0px !important;
            padding-right: 0px !important;
			margin-left: 0px !important;
            // &:last-child {
            //     margin-right: 0;
            // }
        }
        .primary {
            color: $primaryColor;
            background: #fff;
            border-color: $primaryColor;
        }
    }
</style>